<template>
  <div class="full-container">
    <div class="edit-container">
      <!-- 新建用户按钮 -->
      <div class="settings">
        <a class="button is-info" @click="isNewUserCardActive = true">新建用户</a>
      </div>
      <b-table
        :data="data"
        class="customer-table"
        :striped="true"
        :narrowed="true"
        :paginated="true"
        :per-page="15"
        :pagination-simple="true">
        <template slot-scope="props">
          <b-table-column field="id" label="序号" width="50" numeric>
            {{ props.row.id }}
          </b-table-column>
          <b-table-column field="name" label="名称">
            {{ props.row.name }}
          </b-table-column>
          <b-table-column field="phone" label="手机号" numeric centered>
            {{ props.row.phone }}
          </b-table-column>
          <b-table-column field="email" label="邮箱" >
            {{ props.row.email }}
          </b-table-column>
          <b-table-column field="expiredAt" label="到期时间">
            {{props.row.expiredAt}}
          </b-table-column>
          <b-table-column label="删除">
            <a class="button is-danger" @click="confirmCustomDelete(props.row.id)">删除</a>
          </b-table-column>
          <b-table-column label="编辑">
            <a class="button is-success" @click="openEditModal(props.row.id)">编辑</a>
          </b-table-column>
        </template>
      </b-table>
    </div>
    <!-- 模态框 -->
    <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
        <div class="card">
            <div class="card-content">
              <b-field label="到期时间">
                  <b-datepicker v-model="editUserInfo.expireAt"
                      :first-day-of-week="1"
                      placeholder="选择到期时间"
                      :min-date="minDate">
                  </b-datepicker>
              </b-field>
              <b-field label="新密码">
                  <b-input v-model="editUserInfo.password"></b-input>
              </b-field>
              <b-field label="确认密码">
                  <b-input></b-input>
              </b-field>
              <div class="card-button">
                <a class="button is-info" @click="updateUserInfo">确认修改</a>
              </div>
            </div>
        </div>
    </b-modal>
    <b-modal :active.sync="isNewUserCardActive" :width="640" scroll="keep">
        <div class="card">
            <div class="card-content">
              <b-field label="用户名">
                  <b-input v-model="newUserInfo.name"></b-input>
              </b-field>
              <b-field label="邮箱">
                  <b-input v-model="newUserInfo.email"></b-input>
              </b-field>
              <b-field label="手机号">
                  <b-input v-model="newUserInfo.phone"></b-input>
              </b-field>
              <b-field label="到期时间">
                  <b-datepicker v-model="newUserInfo.expiredAt"
                      :first-day-of-week="1"
                      placeholder="选择到期时间"
                      :min-date="minDate">
                  </b-datepicker>
              </b-field>
              <b-field label="用户密码">
                  <b-input v-model="newUserInfo.password"></b-input>
              </b-field>
              <b-field label="确认密码">
                  <b-input v-model="newUserInfo.confirmPassword"></b-input>
              </b-field>
              <div class="card-button">
                <a class="button is-info" @click="createNewUser">新建用户</a>
              </div>
            </div>
        </div>
    </b-modal>
    <!-- loading状态 -->
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
  </div>
</template>

<script>
import {getUserList, createUser, deleteUser, updateUser} from "@/api/user"
export default {
  name: "customer-list",
  methods: {
    showToast(message,type){
      this.$toast.open({
        message: message || '未知错误',
        type: type
      })
    },
    //获取用户信息
    getUserListInfo(){
      this.isLoading = true;
      getUserList().then((res) => {
        this.isLoading = false;
        this.data = res.data.content;
      }).catch(e => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      });
    },
    updateUserInfo(){
      this.isLoading = true;
      updateUser(this.currentEditUserId,this.editUserInfo).then((res)=>{
        this.isCardModalActive = false;
        this.showToast('修改信息成功','is-success');
        this.getUserListInfo();
        this.isLoading = false;
      }).catch((e) => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })

    },
    openEditModal(userId){
      this.isCardModalActive = true;
      this.currentEditUserId = userId;
    },
    async createNewUser(){
      let userInfo = this.newUserInfo;
      if(!userInfo.name){
        this.showToast('请输入用户名','is-danger');
        return;
      }else if(!userInfo.email){
        this.showToast('请输入邮箱','is-danger');
        return;
      }else if(!userInfo.phone){
        this.showToast('请输入手机号','is-danger');
        return;
      }else if(!userInfo.password){
        this.showToast('请输入密码','is-danger');
        return;
      }else if(userInfo.password != userInfo.confirmPassword){
        this.showToast('两次输入的密码必须相同','is-danger');
        return;
      }
      this.isLoading = true;
      createUser(userInfo).then( (res) => {
        this.showToast('新建用户成功','is-success');
        this.getUserListInfo();
        this.isNewUserCardActive = false;
        this.isLoading = false;
      }).catch((e) => {
        this.showToast(e.message,'is-danger');
        this.isLoading = false;
      });
    },
    async confirmCustomDelete(userId) {
      console.log(`userId${userId}`);
      this.$dialog.confirm({
          title: '删除用户',
          message: '确定要 <b>删除</b> 此用户? 数据删除后不可回复',
          confirmText: '确定删除',
          cancelText: '取消',
          type: 'is-danger',
          hasIcon: false,
          onConfirm: () => {
            this.isLoading = true;
            deleteUser(userId).then((res)=>{
              this.showToast('删除成功','is-success');
              this.getUserListInfo();
              this.isLoading = false;
            }).catch((e) => {
              this.isLoading = false;
              this.showToast(e.message,'is-danger');
            });
          }
      })
    }
  },
  data() {
    const today = new Date();
    return {
      isCardModalActive: false,
      isNewUserCardActive: false,
      data: [],
      currentEditUserId: 0,
      newUserInfo: {
        name: '',
        email: '',
        phone: '',
        expiredAt: new Date(),
        password: '',
        confirmPassword: '',
      },
      editUserInfo: {
        expireAt: new Date(),
        password: ''
      },
      minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
      isLoading: false,
      isFullPage: true,
    }
  },
  async mounted() {
    // this.newUserInfo.expiredAt = Date.now();
    this.getUserListInfo();
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  margin: 20px 20px;
  padding: 40px 40px;
  height: 80vh;
  background-color: #ffffff;
}
.card-button {
  display: flex;
  justify-content: center;
}
.settings {
  display: flex;
  // flex-direction: row-reverse;
  margin-bottom: 20px;
  margin-right: 20px;
}
</style>
